import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';

import {
    Button,
    DatePicker,
    Form,
    Input,
    Modal,
    Radio,
    Tag,
    Select,
    InputNumber,
    message,
    Row,
    Col,
    Tree,
} from 'antd';
import { modalLayoutLg, modalLayoutSm } from '@/config/layout';
import { request, useModel } from 'umi';
import './index.less'
import apilist from '@/pages/sysman/index/apilist';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
const SelectSubject = (props: any, refs: any) => {
    const { initialState, setInitialState } = useModel('@@initialState');
    const { currentUser } = initialState;
    const [code, setCode] = useState('');
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [treeData, settreedata] = useState([]);
    const [value, setvalue] = useState('')
    const [searchStr, setsearchStr] = useState('')
    const [selectObj, setselectObj] = useState({})
    const [form] = Form.useForm(); //搜索表单
    const actionRef = useRef();
    const [selectedRowKeys, setselectedRowKeys] = useState([])
    const [selectedRows, setselectedRows] = useState([])
    //显示弹窗
    const showModal = () => {
        setIsModalVisible(true);
    };

    //取消
    const handleCancel = () => {
        setIsModalVisible(false);
        setCode('');
        setsearchStr('')
        props.callback && props.callback();
    };
    //确定

    useImperativeHandle(refs, () => ({
        init: (id: any, record: any) => {
            setCode(id);

            showModal();
            // setfileList([]);
        },
    }));

    const getdata = () => {
        request('/data/dynamic/query', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            data: {
                apiID: 'GZW_COURSE_01'
            }
        }).then((res) => {

        });
    };


    const onChange = (e) => {
        setsearchStr(e.target.value)
    }
    const handleOk = (record) => {
        props.onOk && props.onOk(record);
        handleCancel();
    }
    const columns = [
        // {
        //     title: '行次',
        //     dataIndex: 'index',
        //     key: 'index',
        //     hideInSearch: true,
        //     render: (text, record, index) => {
        //         return index + 1
        //     }
        // },
        {
            title: '用户',
            dataIndex: 'user_name',
            key: 'user_name',
        },
        {
            title: '操作',
            dataIndex: 'scan',
            key: 'scan',
            width: 100,
            hideInSearch: true,
            render: (txt, record) => {
                return <a onClick={() => {
                    handleOk(record)
                }}>选择</a>
            }
        },
    ]

    // rowSelection object indicates the need for row selection
    const rowSelection = {
        selectedRowKeys: selectedRowKeys,
        onChange: (selectedRowKeysn: [], selectedRowsn: []) => {
            console.log(`selectedRowKeys: ${selectedRowKeysn}`, 'selectedRows: ', selectedRowsn);
            setselectedRowKeys(selectedRowKeysn)
            setselectedRows(selectedRowsn)
        },
        getCheckboxProps: (record) => ({
            name: record.name,
        }),
    };
    return (
        <Modal
            title={'选择'}
            visible={isModalVisible}
            onOk={handleOk}
            onCancel={handleCancel}
            centered
            width={1000}
            maskClosable={false}
            destroyOnClose
            bodyStyle={{
                maxHeight: window.innerHeight - 150,
                overflowY: 'auto',
            }}
            footer={
                <Button onClick={handleCancel}>取消</Button>
            }

        >
            <ProTable
                actionRef={actionRef}
                columns={columns}
                rowKey={record => record.user_id}
                params={form.getFieldsValue()}
                size='small'
                options={false}
                pagination={false}
                // rowSelection={{
                //     type: 'radio',
                //     ...rowSelection,
                // }}
                // search={false}
                defaultExpandAllRows
                scroll={{ x: 'max-content', y: window.innerHeight - 420 }}
                // params 是需要自带的参数
                // 这个参数优先级更高，会覆盖查询表单的参数
                request={async (
                    // 第一个参数 params 查询表单和 params 参数的结合
                    // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
                    params: T & {
                        pageSize: number;
                        //current: number;
                    },
                    sort,
                    filter,
                ) => {
                    const paramsdata: any = {
                        "apiID": "GZW_APPLY_01",
                        "apiParam": {
                            'orderBy': 'org_id',
                            // "paging": { "pageSize": params.pageSize, "pageNum": params.current },
                            "where": []
                        }
                    };
                    if (params.user_name) {
                        paramsdata['apiParam']['where'].push({
                            connector: "like",
                            'feild': "user_name",
                            'value': params.user_name
                        });
                    }
                    // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
                    // 如果需要转化参数可以在这里进行修改
                    const response: any = await request(`/data/dynamic/query`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        data: paramsdata
                    });
                    let data = response?.data?.data || [];
                    return {
                        data: data,
                        // success 请返回 true，
                        // 不然 table 会停止解析数据，即使有数据
                        success: true,
                        // 不传会使用 data 的长度，如果是分页一定要传
                        total: response?.data?.count,
                        //message.success(res?.meta?.msg);
                    };
                }}
            />
        </Modal>
    );
};
const SelectCom = forwardRef(SelectSubject);
export default SelectCom;
